<div class="layui-content">
    <!-- 横幅 -->
    <div class="banner">
        <div class="layui-container">
            <div class="layui-box">
                <h1 class="layui-font-green">
                    <?=htmlspecialchars($title??'')?> 博客
                </h1>
                <span class="layui-font-purple">
                    <?=htmlspecialchars($min_title??'')?> blog
                </span>
                <p>
                    <?=htmlspecialchars($description??'')?>
                </p>
                <div class="layui-tools-group">
                    <a href="<?=htmlspecialchars($gitee??'')?>" target="_blank" class="layui-btn">
                        <i class="layui-icon layui-icon-edge"></i>
                        码&emsp;&nbsp;云
                    </a>
                    <a href="<?=htmlspecialchars($github??'')?>" target="_blank"
                        class="layui-btn layui-btn-primary layui-border">
                        <i class="layui-icon layui-icon-edge"></i>
                        GITHUB
                    </a>
                </div>
            </div>
            <div class="layui-box">
                <img src="/images/un10.svg" alt="banner">
            </div>
        </div>
    </div>

    <!-- 特点 -->
    <div class="feature layui-bg-gray">
        <div class="layui-container">
            <div class="layui-box">
                <div class="layui-box-img">
                    <img src="/images/un32.svg" alt="001">
                </div>
                <h3 class="layui-font-black">逻辑思维</h3>
                <p>注释清晰，便于阅读</p>
                <p>严格逻辑，清晰规划</p>
            </div>
            <div class="layui-box">
                <div class="layui-box-img">
                    <img src="/images/un35.svg" alt="002">
                </div>
                <h3 class="layui-font-black">能力提升</h3>
                <p>分析问题，解决方案</p>
                <p>逐步调试，逐步调试</p>
            </div>
            <div class="layui-box">
                <div class="layui-box-img">
                    <img src="/images/un8.svg" alt="003">
                </div>
                <h3 class="layui-font-black">创新能力</h3>
                <p>工具平台，创意转化</p>
                <p>实用应用，充分发挥</p>
            </div>
            <div class="layui-box">
                <div class="layui-box-img">
                    <img src="/images/un11.svg" alt="004">
                </div>
                <h3 class="layui-font-black">不断更新</h3>
                <p>最佳实践，保持学习</p>
                <p>跟上技术，编程范式</p>
            </div>
        </div>
    </div>

    <!-- 热门项目 -->
    <div class="hot">
        <h3>热门项目</h3>
        <div class="layui-box layui-container ">
            {#each hot as v,k}
            <div class="layui-box-item">
                <h3 class="layui-font-gray">{v.title}</h3>
                <div class="layui-box-card">
                    <div class="layui-works">
                        <div class="layui-works-img"
                            style="background-size: 100%; background-image: url(<?=htmlspecialchars($api??'')?>{v.image});">
                        </div>
                        <div class="layui-works-tools">
                            <a class="layui-btn" href="{v.website??''}" target="_blank" rel="">官网</a>
                        </div>
                    </div>
                    <div class="layui-works-body">
                        <div class="layui-works-group">
                            <a href="{v.gitee??''}" target="_blank" rel="gitee">
                                <i class="layui-icon layui-icon-edge"></i>
                            </a>
                            <a href="{v.github??''}" target="_blank" rel="github">
                                <i class="layui-icon layui-icon-github"></i>
                            </a>
                        </div>
                        <span>最近更新：{v.created_at}</span>
                    </div>
                </div>
            </div>
            {/each}
        </div>
    </div>

    <!-- 最新笔记 -->
    <div class="note layui-bg-gray">
        <h3>最新笔记</h3>
        <div class="layui-container">
            {#each note as v,k}
            <div class="layui-box">
                <h3>{v.title}</h3>
                <p>{v.description}</p>
                <div class="layui-box-tools">
                    <span>发布时间：{v.created_at}</span>
                    <a href="javascript:;" onclick="layui.app.navigateTo('note.detail','id={v.id}')"
                        class="layui-btn layui-btn-xs">立即前往</a>
                </div>
            </div>
            {/each}
        </div>
    </div>

    <!-- 友情链接 -->
    <div class="blogroll">
        <h3>友情链接</h3>
        <div class="layui-container">
            {#each blogroll as v,k}
            <div class="layui-box">
                <a href="{v.website}" target="_blank">
                    <div class="layui-box-card">
                        <div class="layui-box-img"
                            style="background-size: cover; background-image: url(<?=htmlspecialchars($api??'')?>{v.logo});">
                        </div>
                    </div>
                    <p>{v.title}</p>
                </a>
            </div>
            {/each}
        </div>
    </div>

</div>